<template>
    <div class="m-login">
        <div class="m-login-content" @keyup.enter="handleLogin">
            <h4 class="m-login-title">欢迎登录</h4>
            <Form ref="form" :model="loginForm" :rules="loginRules">
                <FormItem prop="username">
                    <Input type="text" v-model="loginForm.username" placeholder="用户名">
                        <Icon type="md-person" slot="prepend" size="16px" color="#999"></Icon>
                    </Input>
                </FormItem>
                <FormItem prop="password">
                    <Input type="password" v-model="loginForm.password" placeholder="密码">
                        <Icon type="md-lock" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" long :loading="committing" @click="handleLogin">登录</Button>
                </FormItem>
            </Form>
        </div>
    </div>
</template>

<script>
import env from '../../../build/env.js';
export default {
    name: '',
    data() {
        return {
            committing: false,
            loginForm: {
                username: env === 'development' ? 'admin' : '',
                password: env === 'development' ? 'ppd123456' : ''
            },
            loginRules: {
                username: [
                    {required: true, trigger: 'blur', message: '请输入用户名'}
                ],
                password: [
                    {required: true, trigger: 'blur', message: '请输入密码'}
                ]
            }
        }
    },
    methods: {
        handleLogin() {
            /* this.$store.commit('login', {access_token: 1, id: 1});
            this.$router.push({name: 'home_index'});
            return false; */
            if(this.committing) return false;
            this.$refs.form.validate((valid) => {
                if(valid) {
                    this.committing = true;
                    this.$ajax.post('/admin/login/login', this.loginForm).then((res) => {
                        this.$Message.success('登录成功');
                        this.$store.commit('login', res);
                        this.$router.push({name: 'home_index'});
                    }).catch((err) => {
                        this.$Message.error(err.message || '登录失败');
                        this.committing = false;
                    })
                }
            })     
        }
    }
}
</script>

<style lang="less">
.m-login {
    position: relative;
    min-width: 1200px;
    height: 100%;
    background: #fff url('../../assets/images/login_bg.jpg') no-repeat center;
    background-size: cover;
    &-content {
        position: absolute;
        right: 100px;
        top: 50%;
        padding: 20px;
        width: 320px;
        min-height: 320px;
        border-radius: 10px;
        background-color: #fff;
        transform: translateY(-50%);
    }
    &-title {
        margin-bottom: 40px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ddd;
    }
}
</style>